<template>
  <el-dialog :visible.sync="visible" :title="$t('label_car_photos')" width="auto">

    <div class="imgFlex">
      <div v-for="(item, index) in photoData" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="photo">
          <ex-upload-img v-model="formData.imageList[index].fileUrl" :headers="{ targetFolder: '_public_' }" />
          <div class="example">
            <el-image :src="item.example" :preview-src-list="[item.example]" />
            <span class="text">{{ $t('label_example') }}</span>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="">
      <el-button type="primary" @click="submitForm">{{ $tt('label_confirm') }}</el-button>
      <el-button @click="resetForm">{{ $tt('label_cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'detail_task_record',
  data() {
    return {
      visible: false,
      loading: false,
      formData: {
        scheduleCode: '',
        imageList: [{
          fileUrl: '',
          fileCode: 'VEHICLE_HEAD'
        }, {
          fileUrl: '',
          fileCode: 'VEHICLE_TAILSTOCK'
        }, {
          fileUrl: '',
          fileCode: 'VEHICLE_SEAL'
        }, {
          fileUrl: '',
          fileCode: 'VEHICLE_DOOR'
        }]
      },
      photoData: []
    }
  },
  mounted() {
    this.photoData = [{
        title: this.$t('label_car_front_photo'),
        example: require('@/asset/imgs/car/front.png'),
      }, {
        title: this.$t('label_car_rear_photo'),
        example: require('@/asset/imgs/car/rear.png')
      }, {
        title: this.$t('label_lead_sealing_photo'),
        example: require('@/asset/imgs/car/lead_sealing.png')
      }, {
        title: this.$t('label_car_opening_photo'),
        example: require('@/asset/imgs/car/opening.png')
      }]
  },
  methods: {
    show(row) {
      this.visible = true
      this.loading = true
      this.formData.scheduleCode = row.scheduleCode
      this.getData(row.scheduleCode)
    },
    getData(scheduleCode) {
      this.$ajax({
        url: "/wms-api/inbound/WmsInboundScheduleRpc/getVehicleImages.json",
        method: 'get',
        // type: 'json',
        data: { scheduleCode },
        loading: true,
        success: (res) => {
          if(res&&res.data&&res.data.rows){
            res.data.rows.forEach(item=>{
              for (let index = 0; index < this.formData.imageList.length; index++) {
                if(item.fileCode === this.formData.imageList[index].fileCode){
                  this.formData.imageList[index].fileUrl = item.fileUrl
                  break
                }
              }
            })
          }

        }
      })
    },
    submitForm() {
      this.$ajax({
            url: "/wms-api/inbound/WmsInboundScheduleRpc/saveVehicleImage.json",
            method: 'post',
            type: 'json',
            data: this.formData,
            loading: true,
            success: (res) => {
              this.$emitPage('warehouse_appointment>confirm', 'reload')
              this.resetForm()
              this.$message.success(this.$tt("tip_submit_success"))
            }
          })
    },
    resetForm() {
      this.visible = false
      this.$data.formData = this.$options.data().formData
    }
  },
}

</script>
<style lang="less" scoped>
.imgFlex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px 100px;

  >div {
    .title {
      font-size: 14px;
      line-height: 22px;
    }

    .photo {
      margin-top: 8px;
      display: flex;

      .example {
        width: 180px;
        height: 180px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        margin-left: 15px;
        background-color: #D9DFE7;
        position: relative;
        padding: 8px;
        box-sizing: border-box;

        .text {
          position: absolute;
          right: 8px;
          bottom: 8px;
          height: 20px;
          border-radius: 10px 0px 0px 0px;
          background: rgba(48, 48, 60, 0.8);
          color: #fff;
          padding: 0 12px;
        }
      }
    }
  }
}
</style>
